<template>
	<view class="boxMin">
		<view class="box">
			<view class="left">
				<image :src="options.wxCoverImg"></image>
				<view class="fp" v-if="options.outerChain">{{options.outerChain}}</view>
			</view>
			<view class="right">
				<view class="one" v-if="options.title">{{options.title}}</view>
				<view class="too" v-if="options.subtitleOne">{{options.subtitleOne}}</view>
				<view class="one opacity" v-if="!options.title">0</view>
				<view class="too opacity" v-if="!options.subtitleOne">0</view>
				<view><text class="three" v-if="options.classify">{{options.classify}}星经纪人以上专享</text></view>
				<view><text class="three" v-if="!options.classify">不限</text></view>
				<view>
						<text class="four">￥{{options.price || 0}}万</text><text class="fourText">市场价</text>
						<text class="four">￥{{options.marketPrice || 0}}万</text>
				</view>
			</view>
		</view>
		<view class="footer" v-if="options.projectId != null">
			<view class="footerText"><text>佣金：</text><text>{{options.brokerChargeExplain}}</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			options: {
				type: Object,
				default: function(e) {
					return {}
				}
			}
		},
		methods: {
		}
	}
</script>

<style scoped>
	.boxMin{
		margin: 60rpx 0;
	}
	.box {
	    width: 100%;
	    padding: 0 30rpx 0 30rpx;
	    overflow: hidden;
	    display: flex;
	}
	
	.left {
	    width: 240rpx;
	    height: 180rpx;
	    position: relative;
	}
	
	image {
	    width: 100%;
	    height: 100%;
	}
	
	.fp {
	    position: absolute;
	    top: 0;
	    left: 0;
	    font-size: 10px;
	    color: white;
	    background-color: #FE893B;
	    padding: 2rpx 10rpx;
	}
	
	.right {
	    padding-left: 30rpx;
	    height: 180rpx;
	    line-height: 45rpx;
	    width: calc(100% - 240rpx);
	    text-overflow: ellipsis;
	}
	.boxMin .footer {
	    width: 100%;
	    margin: 0;
	    padding: 0 30rpx;
	}
	.footerText {
	    line-height: 50rpx;
	    color: #52AAF8;
	    background-color: rgb(225, 244, 255);
	    font-size: 12px;
	}
	.one {
	    font-size: 16px;
	    font-weight: bold;
	    color: #333333;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	
	.too {
	    font-size: 11px;
	    color: #999999;
	    overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	}
	
	.three {
	    font-size: 11px;
	    color: #368FFA;
	    background-color: rgba(54, 143, 250, 0.1);
	    padding: 2rpx 10rpx;
	}
	
	.four {
	    font-size: 16px;
	    font-weight: bold;
	    color: #FF3347;
	}
	
	.fourText {
	    font-size: 12px;
	    margin-left: 20rpx;
	}
	.text {
	    text-align: center;
	    font-size: 14px;
	    color: #999999;
	}
	.textcenter {
	    margin-right: 20rpx;
	}
	.boxMin .footer {
	    margin-top: 40rpx;
	    text-align: center;
	    font-size: 14px;
	    color: #333333;
	}
	.btn {
	    width: 100%;
	}
	.btnText {
	    width: 88%;
	    margin: 0 6%;
	    background-color: #52AAF8;
	    color: white;
	    font-size: 16px;
	    line-height: 80rpx;
	    border-radius: 25px;
	    text-align: center;
	    margin-top: 20rpx;
	}
	.opacity{
	    opacity: 0;
	}
	.addtellBox {
	    width: 100%;
	    height: 100vh;
	    overflow: hidden;
	    background-color: rgba(0,0,0,0.6);
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 10;
	    display: flex;
	    align-items:center;
	    justify-content:center;
	}
	.addtellMian{
	    width: 100%;
	}
	.addtellTitle {
	    font-size: 18px;
	    font-weight: bold;
	    color: #333333;
	    text-align: center;
	    margin: 20rpx 0;
	}
	.tellsection {
	    background-color: white;
	    width: 80%;
	    margin: 0 auto;
	    border-radius: 10px;
	    padding: 30rpx 30rpx 50rpx 30rpx;
	}
	.label {
	    position: relative;
	}
	.guanbi {
	    position: absolute;
	    top: 20px;
	}
	.guanbiImg {
	    width: 100%;
	    height: 60rpx;
	    text-align: center;
	    margin-top: 40rpx;
	}
	.gbImg {
	    width: 60rpx;
	    margin: 0 auto;
	}
</style>
